<template>
  <div>
    <!-- 第一部分的 -->
    <a-row>
      <a-col
        class="col_box"
        v-for="item in itemList"
        :key="item.text"
        :span="6"
      >
        <div class="item_box">
          <div class="img_box">
            <img :src="item.icon" alt="" />
          </div>
          <div class="text">
            <p>{{ item.text }}</p>
            <count-up :start-val="0" :end-val="item.num"></count-up>
          </div>
        </div>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="18">
        <div id="LineMain"></div>
      </a-col>
      <a-col :span="6">
        <div id="PieMain"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { apiGetUserRatio, apiGetHomeInfo } from '@/api/User/api'
import { apiSevenDaysNum } from '@/api/Service/api'
type EChartsOption = echarts.EChartsOption
import { onMounted, ref } from 'vue'
import CountUp from 'vue-countup-v3'
const itemList = ref([
  {
    icon: '/src/assets/home/首页-社区.png',
    text: '社区数量',
    num: 32,
  },
  {
    icon: '/src/assets/home/首页-用户.png',
    text: '用户数量',
    num: 438,
  },
  {
    icon: '/src/assets/home/活跃 .png',
    text: '今日活跃度',
    num: 3493,
  },
  {
    icon: '/src/assets/home/帖子.png',
    text: '发帖数量',
    num: 437,
  },
])

//初始化线性统计图
const initLine = async () => {
  let { data } = await apiSevenDaysNum()
  console.log(data)

  var myChart = echarts.init(document.getElementById('LineMain')!)
  var option: EChartsOption

  option = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
      text: '过去七日的数据',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      data: ['预约数量', '发帖数量'],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: [
          data.sevenDay[6].appointmentDate,
          data.sevenDay[5].appointmentDate,
          data.sevenDay[4].appointmentDate,
          data.sevenDay[3].appointmentDate,
          data.sevenDay[2].appointmentDate,
          data.sevenDay[1].appointmentDate,
          data.sevenDay[0].appointmentDate,
        ],
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '预约数量',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)',
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [
          data.sevenDay[6].number,
          data.sevenDay[5].number,
          data.sevenDay[4].number,
          data.sevenDay[3].number,
          data.sevenDay[2].number,
          data.sevenDay[1].number,
          data.sevenDay[0].number,
        ],
      },
      {
        name: '发帖数量',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        label: {
          show: true,
          position: 'top',
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 191, 0)',
            },
            {
              offset: 1,
              color: 'rgb(224, 62, 76)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [
          data.forumNums[6].number,
          data.forumNums[5].number,
          data.forumNums[4].number,
          data.forumNums[3].number,
          data.forumNums[2].number,
          data.forumNums[1].number,
          data.forumNums[0].number,
        ],
      },
    ],
  }

  option && myChart.setOption(option)
}

//初始化拼图
const initPie = async () => {
  let { data } = await apiGetUserRatio()
  type EChartsOption = echarts.EChartsOption

  var chartDom = document.getElementById('PieMain')!
  var myChart = echarts.init(chartDom)
  var option: EChartsOption

  option = {
    title: {
      text: '用户数量占比',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      top: 50,
      // left: 'center',
      // bottom: 'center',
    },
    series: [
      {
        name: '用户身份',
        type: 'pie',
        radius: '60%',
        label: {
          show: true,
          position: 'inner',
          formatter: '{d}%',
        },
        data: [
          { value: data.admin.ratio, name: data.admin.typeName },
          { value: data.doctor.ratio, name: data.doctor.typeName },
          { value: data.user.ratio, name: data.user.typeName },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }

  option && myChart.setOption(option)
}

onMounted(async () => {
  let { data } = await apiGetHomeInfo()
  itemList.value[0].num = data.countCommunity
  itemList.value[1].num = data.countEmp
  itemList.value[3].num = data.countForum

  await initPie()
  await initLine()
})
</script>

<style lang="scss" scoped>
.col_box {
  padding: 10px 16px;
  box-sizing: border-box;

  .item_box {
    width: 100%;
    height: 100px;
    background: #f29f4b;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: all 0.6s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:hover {
      background: #f04d0d;
    }
    .img_box {
      width: 100px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .text {
      flex: 1;
      p:nth-child(1) {
        margin-bottom: 6px;
      }
      div {
        font-size: 24px;
        margin: 0;
      }
    }
  }
}
#LineMain,
#PieMain {
  width: 100%;
  height: 500px;
  padding: 20px;
  box-sizing: border-box;
}
</style>
